<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@page isELIgnored="false" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>修改排班</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link id="bootstrap-style" href="<c:url value="/css/bootstrap.min.css"/>" rel="stylesheet">
	<link href="<c:url value="/css/bootstrap-responsive.min.css"/>" rel="stylesheet">
	<link id="base-style" href="<c:url value="/css/style.css"/>" rel="stylesheet">
	<link id="base-style-responsive" href="<c:url value="/css/style-responsive.css"/>" rel="stylesheet">
	<link href="<c:url value="/css/index.css"/>" rel="stylesheet">
	<link rel="shortcut icon" href="<c:url value="/img/favicon.ico"/>">
	<link href="<c:url value="/css/page.css"/>" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="<c:url value="/css/jquery.datetimepicker.css"/>"/>
	<link href="<c:url value="/css/but.css"/>" rel="stylesheet">
	<script src="<c:url value="/js/jquery-1.9.1.min.js"/>"></script>
	<script src="<c:url value="/js/jquery-migrate-1.0.0.min.js"/>"></script>
	<script type="text/javascript" src="<c:url value="/js/layer/layer.js"/>"></script>
	<script src="<c:url value="/js/laydate/laydate.js"/>"></script>
	<script src="<c:url value="/js/build/jquery.datetimepicker.full.js"/>"></script>
</head>
 <script type="text/javascript">
 
 $(function(){ 
	 var msg="${msg}";
	 if(msg!=null&&msg!=""){
		 alert(msg);
		 window.parent.location.reload(); //刷新父页面
	 }
 }); 
 
 
 var i="${spnum}";
 
 
 function closebutton() {
	var index = parent.layer.getFrameIndex(window.name);  
 	parent.layer.close(index);  
 }
 
 function addTr2(tab, row){
	 if(parseInt(i)<parseInt(3)){
	 	i++;
	 	var trHtml="<tr><td style='text-align:right;'>上班时间：</td>"+
	    "<td style='text-align:left; '>"+
	    	"<input class='time' type='hidden' id='spid' name='spid'  />"+
			"<input class='time' type='text' class='demo-input' placeholder='请选择时间' id='starttime"+i+"' name='starttime"+i+"'  onclick=\"setTime('#starttime"+i+"');\">"+
		"</td>"+
		"<td style='text-align:right;'>下班时间：</td>"+
		"<td style='text-align:left; '>"+
			"<input class='time'  type='text' class='demo-input' placeholder='请选择时间' id='endtime"+i+"' name='endtime"+i+"' onclick=\"setTime('#endtime"+i+"');\">"+
		"</td>"+
		"<td style='text-align:left; '>"+
		"<a href='#' onclick='removeRow(this)'>"+
			"<img  src='<%=basePath%>img/youlingimg/delete.png'>"+
		"</a>"+
		"</td>"+
		"</tr>";
	    addTr(tab, row, trHtml);
	    setTime('#starttime'+i);
	    setTime('#endtime'+i);
	 }
}
 
 function addTr(tab, row, trHtml){
     //获取table最后一行 $("#tab tr:last")
     //获取table第一行 $("#tab tr").eq(0)
     //获取table倒数第二行 $("#tab tr").eq(-2)
     var $tr=$("#"+tab+" tr").eq(row);
     if($tr.size()==0){
        alert("指定的table id或行数不存在！");
        return;
     }
     $tr.after(trHtml);
  }
 
function setTime(id){
	 laydate.render({
		  elem: id
		  ,type: 'time'
		  ,format: 'HH:mm'
		  ,done: function(res, curr, count){
				var inputs = $(id);  
				inputs.each(function(i, btn) { 
					laydate.render({ 
					elem: id
					,type: 'time' 
					,format:'HH:mm'
					});

				}); 
					
			}
	 });
 }


function submitForm(){
	var list=document.getElementsByClassName("time");
	var tiem="";
	var reg = /\s/;
	var l=1;
	if(parseInt(i)>parseInt(0)){
		for(var j=0;j<list.length;j++){
			if(j%3!=0){
				if(reg.exec(list[j].value)!=null){
				  alert('不允许输入空格！');
				  return;
				}
				if(list[j].value==""||list[j].value==null){
					alert("时间不允许为空！");
					return;
				}
			}
			if(l%3==0){
				tiem+=list[j].value+";";
			}else{
				tiem+=list[j].value+",";
			}
			l++;
		}
		$("#tiems").val(tiem);
		document.forms["frm"].submit();
	}else{
		alert("请设置考勤时间!");
	}
}

//删除行
function removeRow(obj){  
	var tr = this.getRowObj(obj);  
	if(tr != null){  
		tr.parentNode.removeChild(tr);  
		i--;
	}  
}  
	
//得到行对象  
function getRowObj(obj){  
	var i = 0;  
	while(obj.tagName.toLowerCase() != "tr"){  
		obj = obj.parentNode;  
		if(obj.tagName.toLowerCase() == "table")return null;  
	}  
	return obj;  
}   
 </script>
<body>

	<form name="frm" id="frm" method="post" action="<%=basePath%>shift/update">
			<input type="hidden" id="tiems" name="tiems"  value="">
			<input type="hidden" id="id" name="id"  value="${shift.id }">
			<div id="content" class="span10" style="width: 100%;">
				<div class="row-fluid content-table">
					<table id="tab" class="table table-striped table-bordered bootstrap-datatable">
					  <tbody>
						<tr>
							<td style="text-align:right;width: 80px;">班次名称：</td>
							<td  style="text-align:left;">
								<input type="text" id="name" name="name" value="${shift.name }">
							</td>
							<td style="text-align:right;width: 80px;">颜色：</td>
							<td colspan="3" style="text-align:left;">
								<select id="colour" name="colour">
								 	 <option value="workday" ${shift.colour=='workday'?'selected':''}>清水蓝</option>
								 	 <option value="tradeday"  ${shift.colour=='tradeday'?'selected':''}>嫩绿</option>
								 	 <option value="lawday"  ${shift.colour=='lawday'?'selected':''}>淡紫</option>
								 	 <option value="freeday"  ${shift.colour=='freeday'?'selected':''}>橙黄</option>
								</select>
							</td>
						</tr>
						<c:forEach items="${shift.splist }" var="sp" varStatus="i">
							<tr>
								<td style=text-align:right;">上班时间：</td>
								<td style="text-align:left; ">
									<input class="time" type="hidden" id="spid" name="spid"  value="${sp.id }">
									<input class="time" value="${sp.starttime }" onclick="setTime('#starttime${i.index}');" type="text" class="demo-input" placeholder="请选择时间" id="starttime${i.index}" name="starttime${i.index}">
								</td>
								<td style="text-align:right;width: 20%;">下班时间：</td>
								<td style="text-align:left; ">
									<input class="time"  value="${sp.endtime }"  onclick="setTime('#endtime${i.index}');" type="text" class="demo-input" placeholder="请选择时间" id="endtime${i.index}" name="endtime${i.index}">
								</td>
								<td style="text-align:left; ">
									<a href="#" onclick="removeRow(this)">
										<img alt="" src="<%=basePath%>img/youlingimg/delete.png">
									</a>
								</td>
							</tr>
						</c:forEach>
						<tr class="content-search" style="text-align: center;">
							<td colspan="5" >
								<div>
									<button class="but" type="button" onclick="addTr2('tab',-3);" id="output">增加班次时间</button>
								</div>
							</td>
						</tr>
						<tr class="content-search" style="text-align: center;">
							<td colspan="5" style="width:100%;">
								<div>
									<button style="background-color:#f55353;" type="button" onclick="closebutton();" id="output1">关闭</button>
									<button class="but" type="button" id="output" onclick="submitForm();">确定</button>
								</div>
							</td>
						</tr>
					  </tbody>
				  </table>            
				</div>	
			</div>
	</form>
	<script type="text/javascript">
 
laydate.render({
	  elem: '#starttime1'
	  ,type: 'time'
	  ,format: 'HH:mm'
});
 laydate.render({
	  elem: '#endtime1'
	  ,type: 'time'
	  ,format: 'HH:mm'
});
 
 

 </script>
</body>
</html>
